<!DOCTYPE html>

<html>

<head>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="js/libs/codemirror.css">
    <link rel="stylesheet" href="js/libs/monokai.min.css">
    <link rel="stylesheet" href="js/libs/show-hint.css">
</head>

<body>
    <div class="App border-gradient">
        <div class="home" id="home">
            <img src='assets/logo.png' class="logo" alt="logo" />

            <div class="captions">
                <p class="caption">
                    <i class="fa fa-photo" style="margin-right: 5px;"></i>
                    Create custom web design palettes
                </p>

                <p class="caption">
                    <i class="fa fa-download" style="margin-right: 5px;"></i>
                    Save properties of selected elements
                </p>

                <p class="caption">
                    <i class="fa fa-paper-plane" style="margin-right: 5px;"></i>
                    Share and export designs with others
                </p>
            </div>

            
            <button type="button" class="customButton" id="startButton" style="margin-bottom: 50px; width: 80vw;">
                Get Started
            </button>

            <a type="button" class="customButton githubButton"  href="https://github.com/ANG13T/designr" target="_blank">
                <i class="fa fa-github" style="margin-right: 5px;"></i>
                Star on GitHub
            </a>

            <p class="bottom">Made with <i class="fa fa-heart" style="margin-left: 2px; margin-right: 2px;"></i> by <a
                    class="link" href="https://github.com/ANG13T" target="_blank">Angelina Tsuboi</a></p>


        </div>

        <div id="main">

            <div class="main-nav nav" id="main-nav">
                <img src='assets/logo.png' class="logo-nav" alt="logo" />
                <div class="buttons">
                    <button class="create" id="create-palette">
                        <i class="fa fa-plus"></i>
                    </button>
                    <button class="settings" id="view-settings">
                        <i class="fa fa-github"></i>
                    </button>
                </div>
            </div>

            <div class="none-palette" id="none-palette">
                <p class=" text-center">
                <i class="fa fa-pencil-square-o sub-icon"></i>
                <br />
                <span>No palettes created yet! <br /> Click + above to make one!</span>

                </p>
            </div>

            <section class="modal" id="modal">
                <div>
                    <h2 class="modal-title">Create a Palette</h2>
                </div>

                <label for="paletteNameInput" id="paletteLabel">Palette Name</label>
                <input type="text" id="paletteNameInput" placeholder="Enter Palette Name..." />
                <button class="btn" id="create-palette-modal">Create Palette</button>
                <button class="btn btn-close-modal" id="btn-close">Cancel</button>
            </section>


            <div class="overlay hidden" id="overlay"></div>

            <table class="table" id="paletteTable">
                <thead class="thead-light">
                    <tr class="headRow">
                        <th scope="col" style="padding-left: 15px;">Name</th>
                        <th scope="col">Created Date</th>
                        <th scope="col">Elements</th>
                    </tr>
                </thead>
                <tbody class="customtable" id="paletteTableBody">
                </tbody>
            </table>

        </div>

        <div id="view-palette">
            <div class="view-palette-nav nav" id="view-palette-nav">
                <div class="front-section">
                    <button class="create back-button" id="back-palette-button">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <p class="palette-title" id="palette-title">Title</p>
                </div>
                

                <div class="buttons">
                    <button class="create" id="edit-palette-button">
                        <i class="fa fa-pencil"></i>
                    </button>
                    <button class="settings" id="delete-palette-button">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>

            <section class="modal" id="edit-modal">
                <div>
                    <h2 class="modal-title">Edit Palette Name</h2>
                </div>

                <label for="paletteNameInput" id="paletteLabel">Palette Name</label>
                <input type="text" id="paletteNameEditInput" placeholder="Enter Palette Name..." />
                <button class="btn" id="edit-palette-modal">Update Name</button>
                <button class="btn btn-close-modal" id="btn-close-edit">Cancel</button>
            </section>

            <div class="overlay hidden" id="edit-overlay"></div>

            <section class="modal" id="delete-modal">
                <div>
                    <h2 class="modal-title">Delete Palette?</h2>
                    <p>Are you sure? This data will be deleted permanently</p>
                </div>

                <button class="btn" id="delete-palette-modal">Delete Palette</button>
                <button class="btn btn-close-modal" id="btn-close-delete">Cancel</button>
            </section>

            <div class="overlay hidden" id="delete-overlay"></div>

            <div class="none-palette-element" id="none-palette-element">
                <p class=" text-center">
                <i class="fa fa-magic sub-icon"></i>
                <br />
                <span>No elements selected yet! <br /> Click + below to select one!</span>

                </p>
            </div>


            <button id="select-element-button">
                <i class="fa fa-plus" style="margin-right: 5px;"></i>
                Select Element
            </button>

            <button id="save-element-styles">
                <i class="fa fa-clipboard" style="margin-right: 5px;" id="clipboard-icon-pal"></i>
                Copy Palette Code
            </button>

            
            <div id="elmentTableContainer">
                <table class="table" id="paletteElementsTable">
                    <thead class="thead-light">
                        <tr class="headRow">
                            <th scope="col" style="padding-left: 15px;">Name</th>
                        </tr>
                    </thead>
                    <tbody class="customtable" id="paletteElementsTableBody">
                    </tbody>
                </table>
            </div>

        </div>


        <div id="view-element">
            <div class="view-palette-nav nav" id="view-palette-nav">
                <div class="front-section">
                    <button class="create back-button" id="back-element-button">
                        <i class="fa fa-chevron-left"></i>
                    </button>
                    <p class="palette-title" id="element-title">Title</p>
                </div>
                

                <div class="buttons">
                    <button class="create" id="edit-element-button">
                        <i class="fa fa-pencil"></i>
                    </button>
                    <button class="settings" id="delete-element-button">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>

            <div class="code-section">
                <div class="sec-top">
                    <h3 class="code-title">CSS Editor</h3>
                    <div class="sec-buttons">
                        <button class="save-clipboard" id="save-clipboard-button">
                            <i class="fa fa-clipboard" id="clipboard-icon"></i>
                        </button>

                        <button class="save-css-button" id="save-css-button">
                            <i class="fa fa-check"></i>
                        </button>

                        <button class="cancel-css-button" id="cancel-css-button">
                            <i class="fa fa-close"></i>
                        </button>
                    </div>
                </div>
               
                <div class="editor">
                    <div id="code-template-container" class="code a">
                        <div class="html-code code-display"></div>
                    </div>
                </div>
            </div>
            
            <section class="modal" id="edit-element-modal">
                <div>
                    <h2 class="modal-title">Edit Element Name</h2>
                </div>

                <label for="elementNameInput" id="elementLabel">Element Name</label>
                <input type="text" id="elementNameEditInput" placeholder="Enter Element Name..." />
                <button class="btn" id="edit-element-modal-confirm">Update Name</button>
                <button class="btn btn-close-modal" id="btn-close-edit-element">Cancel</button>
            </section>

            <div class="overlay hidden" id="edit-element-overlay"></div>

            <section class="modal" id="delete-element-modal">
                <div>
                    <h2 class="modal-title">Delete Element?</h2>
                    <p>Are you sure? This data will be deleted permanently</p>
                </div>

                <button class="btn" id="delete-element-button-confirm">Delete Element</button>
                <button class="btn btn-close-modal" id="btn-close-delete-element">Cancel</button>
            </section>

            <div class="overlay hidden" id="delete-element-overlay"></div>

        </div>
    </div>
</body>

<script src="js/libs/codemirror.js"></script>
<script src="js/libs/autorefresh.js"></script>
<script src="js/libs/formatting.js"></script>
<script src="js/libs/show-hint.js"></script>
<script src="js/libs/xml-hint.js"></script>
<script src="js/libs/html-hint.js"></script>
<script src="js/libs/xml.js"></script>
<script src="js/libs/javascript.js"></script>
<script src="js/libs/css.js"></script>
<script src="js/libs/htmlmixed.js"></script>
<script src="js/script.js"></script>

</html>